<template>
	<view class="index">
		<nav-bar title="报名参赛" isBack></nav-bar>
		<!-- 建党100周年主题 -->
		<view class="top-banner">
			<image src="https://cos.ryz1620.com/liankun/static/ddimg.jpg"></image>
		</view>
		<!-- 参赛资料 -->
		<view class="participte-contant">
			<view class="title">报名信息填写</view>
			<view class="item">
				<view class="title">填写联系信息</view>
				<view class="card">
					<input  class="price_input" type="text" placeholder="请输入姓名" v-model="name"></input>
				</view>
				<view class="card">
					<input class="price_input"  placeholder="请输入手机号码" type="number" v-model="mobile"></input>
				</view>
				<view class="card">
					<input class="price_input"  placeholder="您的位置(选填)" type="number" v-model="address"></input>
				</view>
			</view>
			<view class="item">
				<view class="cards">
					 <view>
						 <view class="burst-wrap">
						        <view class="uni-uploader__files">
						            <!-- 图片 -->
						                <view class="uni-uploader__file" v-if="imageList">
						                    <view class="iconfont iconhuaban73" @tap="delect()"></view>
						                    <image class="uni-uploader__img" :src="imageList" mode="widthFix" :data-src="image" @tap="previewImage"></image>
						                </view>
						            <!-- 视频 -->
						            <view class="uni-uploader__file" v-if="src">
						                <view class="uploader_video">
						                    <view class="iconfont iconhuaban73" @tap="delectVideo"></view>
						                    <video :src="src" class="video"></video>
						                </view>
						            </view>
						            <view class="uni-uploader__input-box" v-if="VideoOfImagesShow">
						                <view class="uni-uploader__input" @tap="chooseVideoImage">
											<view class="text">
												<image src="@/static/demo/add.png" mode=""></image>
												<text>点击上传作品</text>
											</view>
										</view>
						            </view>
						        </view>
						    </view>
					</view>	
					<text style="font-size: 26rpx;">规格要求:文件格式为JPG,色彩模式RGB,规格A3(297*420mm),分辨率300dpi,作品可单张系列,系列作品需提供整体展示效果图.单张图片大小不超过10M;视频文件最大100M,格式mp4.</text>
				</view>
			</view>	
			<view class="item">
				<view class="card">
					<input  class="price_input" type="text" placeholder="请输入参赛作品名称" v-model="opus_name"></input>
				</view>
				<view class="cards">
					<textarea v-model="content" maxlength="1000" placeholder="请输入个人介绍、作品释义、及点赞宣言等"/>
				</view>
			</view>
		</view>	
		<view class="bar">
			<view class="item">
				<view class="btn btn-red" @click="getparty()">确认提交</view>
			</view>
			<view class="item">
				<view class="btn btn-red" @click="toONEshop('/pages_now/pages/now/foundTheme/index')">返回首页</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from "@/components/navBar/navBar.vue"
	import service_now from '@/service/now.js'
	import URL from '@/config/url.js'
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	]
	export default {
		components: { navBar },
		data() {
			return {
				name:'',
				mobile:'',
				opus:'',
				type:'',
				opus_name:'',
				content:'',
				address:'',
				imageList:'',//图片
				src:"",//视频存放
				sourceTypeIndex: 2,
				checkedValue:true,
				checkedIndex:0,
				sourceType: ['拍摄', '相册', '拍摄或相册'],
				cameraList: [{
						value: 'back',
						name: '后置摄像头',
						checked: 'true'
					},
					{
						value: 'front',
						name: '前置摄像头'
					},
				],
				cameraIndex: 0,
				VideoOfImagesShow:true,
				fileUrl:URL.ENTER_UPLOAD_IMAGE
			};
		},
		onUnload() {
			this.src = '',
			this.sourceTypeIndex = 2,
			this.sourceType = ['拍摄', '相册', '拍摄或相册'];
		},
		onLoad(params) {
			this.$utils.getUrl()
		},
		methods: {
			toONEshop(url){
				uni.navigateTo({
					url
				});
			},
			// 报名参赛
			getparty(){
				if(this.imageList){
                    this.type = 0
				}else{
					this.type = 1
				}
				if (!this.name) return uni.showToast({title: "请输入联系人姓名", icon: "none"});
				if (!this.mobile) return uni.showToast({title: "请输入联系人手机号码", icon: "none"});
				if (!this.opus) return uni.showToast({title: "请上传参赛作品", icon: "none"});
				service_now.getLvieapply({
					name:this.name,
					mobile:this.mobile,
					opus:this.opus,
					type:this.type,
					opus_name:this.opus_name,
					content:this.content,
					address:this.address
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({title: "报名成功！", icon: "none"});
						uni.navigateTo({
							url:'/pages_now/pages/now/foundTheme/index'
						})
					}else{
						uni.showToast({title: res.msg, icon: "none"});
					}
				});
			},
			 chooseVideoImage(){
				uni.showActionSheet({
					title:"选择上传类型",
					itemList: ['图片','视频'],
					success: (res) => {
						console.log(res)
						if(res.tapIndex == 0){
							this.chooseImages()
						} else {
							this.chooseVideo()
						}
					}
				})
			},
			chooseImages(){
			// 上传图片
				uni.chooseImage({
					count: 4, //默认9
					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success:(res)=> {
						let igmFile = res.tempFilePaths;
						uni.uploadFile({
							url:this.fileUrl,
							method:"POST",
							header:{
								'access_token':uni.getStorageSync('token') || '',
								'content-type': 'application/json',
								'user_id':uni.getStorageSync('userId') || ''
							},
							filePath:igmFile[0],
							name:'file',
							success: (res) =>{
								let imgUrls = JSON.parse(res.data); //微信和头条支持
								this.opus = imgUrls.data.id
								this.imageList = imgUrls.data.url; //微信
								if(this.imageList) {
									this.VideoOfImagesShow = false;
								}
							}
						})
						// this.imageList = this.imageList.concat(res.tempFilePaths)  //头条
					},
				});
			},
			chooseVideo(){
				// 上传视频
				uni.chooseVideo({
					maxDuration:60,
					count: 1,
					camera: this.cameraList[this.cameraIndex].value,
					sourceType: ['album'],
					success: (responent) => {
						let videoFile = responent.tempFilePath;
						uni.uploadFile({
							url:this.fileUrl,
							method:"POST",
							header:{
								'access_token':uni.getStorageSync('token') || '',
								'content-type': 'application/json',
								'user_id':uni.getStorageSync('userId') || ''
							},
							filePath:videoFile,
							name:'file',
							success: (res) => {                    
								let videoUrls = JSON.parse(res.data) //微信和头条支持
								// let videoUrls = res.data //百度支持
								this.opus = videoUrls.data.id
								this.src = videoUrls.data.url; //微信
								if(this.src) {
									this.VideoOfImagesShow = false;
								} 
								
							}
						})
						// this.src = responent.tempFilePath;  //头条
					}
				})
			},
			previewImage: function(e) {
				//预览图片
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imageList
				})
			},
			delect(){
				uni.showModal({
					title: "提示",
					content: "是否要删除该图片",
					success: (res) => {
						if (res.confirm) {
							this.imageList = ''
							this.VideoOfImagesShow = true
						}
					}
				})
			},
			delectVideo(){
				uni.showModal({
					title:"提示",
					content:"是否要删除此视频",
					success:(res) =>{
						if(res.confirm){
							this.src = ''
							this.VideoOfImagesShow = true
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		background-color: #e90111;
	}
	.top-banner {
		overflow: hidden;
		position: relative;
		padding-bottom: 145%;
		image {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
	}
	.participte-contant{
		background: #f2f2f2;;
		color: #585858;
		line-height: 45rpx;
		border-radius: 30rpx 30rpx 0 0;
		padding-top: 20rpx;
		.title{
			height: 56.66rpx;
			line-height: 56.66rpx;
			padding: 0 30rpx;
			font-size: 35rpx;
			background: #f2f2f2;
			margin-bottom: 13.33rpx;
			color: #4d4d4d;
			margin-top: 30rpx;
		}
		.item{
			padding: 20rpx 30rpx;
			background: #fff;
			margin-bottom: 20rpx;
			&:last-child{
				margin-bottom: 0;
			}
		}
		.card,.cards{
			padding: 10rpx 0;
			background-color: #fff;
			.price_input{
				padding: 0 30rpx;
				height: 80rpx;
				line-height: 80rpx;
				border:1px solid #f2f2f2;
			}
			textarea{
				width: 100%;
				margin: 20rpx 0;
				background: #f8f8f8;
				border-radius: 10rpx;
				padding: 20rpx;
				height: 240rpx;
			}
		}
		.img_z {
			padding: 18rpx 0;
			overflow: hidden;
		}
		
		.shancs {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			padding: 10rpx;
			background:rgba(0,0,0,0.5) ;
		}
		
		.dianhua_on {
			width: 364rpx;
			height: 74rpx;
			background: linear-gradient(to right, #F55C63, #F78361);
			border-radius: 38rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top: 130rpx;
			margin-left: 192rpx;
		}
		
		.center {
			height: 290rpx;
			border: 1px #dedede dashed;
			background: #f8f8f8;
			overflow: hidden;
			text-align: center;
			position: relative;
		}
	}
	.bar{
		background: #fff;
		padding-bottom: 66.66rpx;
		display: flex;
		.item{
			flex: 1;
		}
	}
	.btn-red{
		width: 233.33rpx;
		height: 76.66rpx;
		line-height: 76.66rpx;
		text-align: center;
		color: #fff;
		font-size: 40rpx;
		border-radius: 20rpx;
		background-image: linear-gradient(to bottom, #f74a43, #ce160c);
		box-shadow: 0 6.66rpx 0 rgba(175, 7, 6, 1);
		margin: 0 auto;
	}	
.burst-wrap{
	margin-bottom: 20rpx;
}	
.uni-uploader__file,.uploader_video{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 400rpx;
	overflow: hidden;
}
.uni-uploader__input{
	height: 290rpx;
	position: relative;
	border:1px #dedede dashed;
	border-radius: 10rpx;
	.text{
		width: 260rpx;
		text-align: center;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		image{
			width: 58rpx;
			height: 58rpx;
			display: block;
			margin: 0 auto;
		}
	}
}
.uni-uploader__file .iconhuaban73{
	position: absolute;
	background: rgba(255,255,255,0.5);
	width: 50rpx;
	height: 50rpx;
	text-align: center;
	line-height: 50rpx;
	top: 0;
	right: 0;
	z-index: 9;
}
.video{
    width: 100%;
    height: 100%;
}

</style>
